<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" style="color: #000"></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #000"
        ></view>
        <!-- 右侧按钮 -->
         <view class="reg" @tap.stop="handleNavTo({ url: '/pages/auth/register2' })">注册</view>
        </view>
      </view>
    </cloudHeader>
    <view class="container">
      <view class="login">
        <text class="login-title">登录</text>
        <text class="login-welcome">欢迎登录蜗牛算力，请使用手机号登录~</text>
      </view>

      <view class="login_box">
        <!-- 手机号登录 -->
        <view class="mobile_box">
          <view class="login-form">

            <input
              type="number"

              :placeholder="$t('mf.auth.input_mobile')"
              placeholder-style="color: rgba(0,0,0,0.4);"
              v-model="mobile_form.username"
            />
          </view>

          <view class="login-form">
            <input
              type="password"
              :placeholder="$t('mf.auth.input_password')"
              placeholder-style="color: rgba(0,0,0,0.4);"
              v-model="mobile_form.password"
            />
          </view>
        </view>
        <!-- 忘记密码 -->
        <view
          class="forget"
          @tap.stop="handleNavTo({ url: '/pages/auth/forget' })"
          >{{ $t("common.operate.forget") }}</view
        >
        <!-- 登录按钮 -->
        <button
          class="login-btn"
          @tap.stop="loginNow"
          :loading="loading['user.login']"
        >
          {{ $t("account.login.title") }}
        </button>

      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
const graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      navIndex: 0,
      mobile_form: {
        username: null,
        password: null,
      },
      email_form: {
        username: null,
        password: null,
      },
      languageShow: false,
      select: {
        type: "us",
        name: "美国",
      },
      show: false,
    };
  },
  computed: {
    ...mapGetters("system", ["locales"]),
    ...mapGetters({ currentLocale: "system/locale" }),
    ...mapGetters("system", ["i18n"]),
    loginNav() {
      return [this.$t("mf.auth.mobile_login"), this.$t("mf.auth.email_login")];
    },
    selectList() {
      return [
        {
          type: "cn",
          name: this.$t("flag.cn"),
        },
        {
          type: "us",
          name: this.$t("flag.us"),
        },
        {
          type: "uk",
          name: this.$t("flag.uk"),
        },
        {
          type: "rs",
          name: this.$t("flag.rs"),
        },
        {
          type: "sk",
          name: this.$t("flag.sk"),
        },
        {
          type: "jp",
          name: this.$t("flag.jp"),
        },
        {
          type: "vn",
          name: this.$t("flag.vn"),
        },
      ];
    },
  },
  methods: {
    ...mapActions("user", ["login"]),
    ...mapActions("system", ["switchLocale"]),
    hideMenu() {
      this.languageShow = false;
    },
    hideMenu2() {
      this.show = false;
    },
    onTapSwitchLang(locale) {
      this.switchLocale({ locale });
      this.setTabBarLang({ locale: locale });
      this.hideMenu();
    },
    navChange(index) {
      this.navIndex = index;
    },
    async loginNow() {
      if (this.navIndex == 0) {
        console.log("??");
        // 表单验证
        var rule = [
          {
            name: "username",
            checkType: "phoneno",
            errorMsg: this.$t("account.tips.mobile_not_right"),
          },
          {
            name: "password",
            checkType: "string",
            checkRule: "1,18",
            errorMsg: this.$t("account.tips.password_not_null"),
          },
        ];
        var checkRes = graceChecker.check(this.mobile_form, rule);
        // 验证通过
        if (checkRes) {
          // 手机登录接口
          await this.login(this.mobile_form);
          this.handleNavTo(this.$config.index);
        } else {
          this.makeToast({ title: graceChecker.error });
        }
      } else if (this.navIndex == 1) {
        console.log(this.email_form);
        // 表单验证
        var rule = [
          {
            name: "username",
            checkType: "email",
            errorMsg: this.$t("account.tips.mail_not_right"),
          },
          {
            name: "password",
            checkType: "string",
            checkRule: "1,18",
            errorMsg: this.$t("account.tips.password_not_null"),
          },
        ];
        var checkRes = graceChecker.check(this.email_form, rule);
        // 验证通过
        if (checkRes) {
          // 邮箱登录接口
          await this.login(this.email_form);
          this.handleNavTo(this.$config.index);
        } else {
          this.makeToast({ title: graceChecker.error });
        }
      }
    },
    selectFlag(item) {
      this.show = false;
      this.select = item;
    },
  },
  onLoad() {
    this.setTabBarLang({ locale: this.currentLocale });
  },
};
</script>

<style scoped>
.container {
  /* background-image: url("/static/loginBG.png"); */
  width: 100%;
  /* padding-top: 480rpx; */
}

.login_box {
  width: 100%;
  position: absolute;
  top: 330rpx;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 60rpx;
  box-sizing: border-box;
}
.nav_item {
  box-sizing: border-box;
  padding-left: 80rpx;
  margin-bottom: 80rpx;
}
.input_box {
  width: 100%;
  height: 96rpx;
  border-radius: 24rpx;
  margin-bottom: 39rpx;
  align-items: center;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.forget {
  height: 45rpx;
  font-size: 12rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2A96EE;
  line-height: 45rpx;
  text-align: right;
  margin-top: 20rpx;
  margin-bottom: 65rpx;
}





page{
		font-family: 'MicrosoftYaHei';
	}
.reg{
  display: flex;
  justify-content: flex-end;
  margin-right: 24rpx;
  margin-top: 37rpx;
  color: #2A96EE;
  font-size: 34rpx;
}
.login{
  display: flex;
  flex-direction: column;
  margin-left: 54rpx;
  margin-top: 106rpx;
}
  .login-title{
			font-size: 48rpx;
		}
		.login-welcome{
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.login-form{
			margin-top: 30rpx;
      padding-bottom:30rpx;
      border-bottom:1px solid #e1e1e1
		}
		.login-forgetPwd{
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #2A96EE;
			margin-right: 52rpx;
			margin-top: 37rpx;
		}
		.login-btn{
			width: 642rpx;
			height: 88rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 79rpx;
			margin-left: 0;
			border-radius: 12rpx;
      background-color: #2A96EE;
      color: #fff;
		}
</style>
